{include file='header'/}
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>封装好的layui上传</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片1</label>
                <div class="layui-input-block">
                    <input type="text" name="image" value="" onmouseover="hui_img_preview('demo1_img',this.value)"
                           onmouseout="layer.closeAll();" id="demo1_img" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-normal layUpload" id="lay_pic"
                            data-input-id="demo1_img" data-type="image"><i class="layui-icon"></i>上传图片
                    </button>
                </div>
                <div class="layui-form-label"></div>
                <div class="layui-input-inline">
                    <div id="demo1_img_box" class="pic_box"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上传附件</label>
                <div class="layui-input-block">
                    <input type="text" name="file" value="" id="demo1_file" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-danger layUpload" id="lay_file"
                            data-input-id="demo1_file" data-type="file"><i class="layui-icon"></i>上传附件
                    </button>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>单图上传与选择</legend>
            </fieldset>
            <div class="layui-form-item" style="display: none">
                <label class="layui-form-label">上传图片2</label>
                <div class="layui-input-block">
                    <input type="text" name="image" value="" onmouseover="hui_img_preview('demo2',this.value)"
                           onmouseout="layer.closeAll();" id="demo3" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-normal webUpload" id="picker_pic3"
                            data-multiple="false" data-input-id="demo2"
                            data-preview-id="demo2" data-type="image"><i class="layui-icon"></i>上传图片
                    </button>
                </div>
            </div>
            <div class="layui-form-item huicmf-upload">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <input type="text" name="avatar" value=""
                           onmouseover="hui_img_preview('avatar-select-input',this.value)"
                           onmouseout="layer.closeAll();" id="avatar-select-input" autocomplete="off"
                           class="layui-input">

                    <button type="button" class="layui-btn layui-btn-normal webUpload"
                            data-open-pic="{:url('upload_file/index',['type'=>'one','select_id'=>'avatar-select-input'])}">
                        <i class="layui-icon"></i>选择图片
                    </button>
                </div>
                <div class="layui-form-label"></div>
                <div class="layui-input-inline">
                    <div id="avatar-select-input_box" class="pic_box"></div>
                </div>
            </div>
            <div class="layui-form-item huicmf-upload">
                <label class="layui-form-label">封面图</label>
                <div class="layui-input-block">
                    <input type="text" name="image" value=""
                           onmouseover="hui_img_preview('thumb-select-input',this.value)"
                           onmouseout="layer.closeAll();" id="thumb-select-input" autocomplete="off"
                           class="layui-input">
                    <button type="button" class="layui-btn layui-btn-normal layUpload" id="picker_pic2"
                            data-multiple="false" data-input-id="thumb-select-input"
                            data-preview-id="thumb" data-type="image"><i class="layui-icon"></i>上传图片
                    </button>
                    <button type="button" class="layui-btn ml-10"
                            data-open-pic="{:url('upload_file/index',['type'=>'one','select_id'=>'thumb-select-input'])}">
                        <i class="layui-icon"></i>上传图片
                    </button>
                </div>
                <div class="layui-form-label"></div>
                <div class="layui-input-inline">
                    <div id="thumb-select-input_box" class="pic_box"></div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>多图选择</legend>
            </fieldset>
            <div class="layui-form-item huicmf-upload">
                <label class="layui-form-label">多图选择</label>
                <div class="layui-input-block">
                    <a class="layui-btn"
                       data-open-pic="{:url('upload_file/index',['type'=>'more','select_id'=>'uploader-list'])}"><i
                            class="layui-icon">&#xe67c;</i>选择图片</a>
                </div>
                <tip>(可拖拽图片调整显示顺序 )</tip>
                <div class="layui-input-block">
                    <!--回调显示选择的图片-->
                    <div class="uploader-list am-cf" id="uploader-list" data-name="params[images][]" data-nums="3"></div>
                </div>
            </div>
            <div class="layui-form-item huicmf-upload">
                <label class="layui-form-label">多图选择</label>
                <div class="layui-input-block">
                    <a class="layui-btn"
                       data-open-pic="{:url('upload_file/index',['type'=>'more','select_id'=>'uploader-list2'])}"><i
                            class="layui-icon">&#xe67c;</i>选择图片</a>
                </div>
                <tip>(可拖拽图片调整显示顺序 )</tip>
                <div class="layui-input-block">
                    <!--回调显示选择的图片-->
                    <div class="uploader-list am-cf" id="uploader-list2" data-name="images[]" data-nums="3"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">内容</label>
                <div class="layui-input-block" id="contentEditorHtml" style="z-index: 0">
                    {php}echo libs\Form::editor('value[editor]','container','','width:100%;height:300px',true);{/php}
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">内容2</label>
                <div class="layui-input-block" id="contentEditorHtml3" style="z-index: 0">
                    {php}echo libs\Form::editorMini('value[editor2]','container2','','width:100%;height:300px');{/php}
                </div>
            </div>

        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="admin-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="pear-btn pear-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>

{include file='footer'/}
<script>
  layui.use(['form', 'jquery', 'upload', 'ddSort'], function () {
    let form = layui.form;
    let $ = layui.jquery;
    let upload = layui.upload;
    form.render();

    window.data_nums = $(".uploader-list").attr('data-nums');

    // 图片列表拖动，需要引入ddSort
    $('.uploader-list').DDSort({
      target: '.file-item',
      delay: 100, // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
      floatStyle: {
        'border': '1px solid #ccc',
        'background-color': '#fff'
      }
    });

  });
</script>
<script>
</script>
</body>
</html>
